
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    <title>物业报修</title>
</head>
<style type="text/css">
	#topdiv{
		width: 100%;
		text-align: center;
		background-color: #F7F7F7;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	#image{
		width: 20px;
		height: 20px;
	}
	#value1{
		width: 100%;
		font-size: 20px;
		overflow:auto;
		word-break:break-all;
	}
	#span1{
		font-size: 20px;
	}
	#tjimg{
		width: 80px;
		height: 80px;
		padding-left: 30px;
		padding-top: 15px;
	}
	#kbdiv{
		width: 100%;
		height: 30px;
		background-color: #F7F7F7;
	}
	#bottomdiv{
		text-align: center;
		padding-top: 100px;
	}
</style>
<body id="body" style="margin: 0;">

<div>
	<form action="upload" method="post" enctype="multipart/form-data">
		<div id="topdiv">
			<div id="" style="float: left;padding-top: 5px;">
				<a href="javascript:history.go(-1)"><img src="img/1588131449(1).png" id="image"/></a>
			</div>
			<div id="">
				<span id="span1">物业报修</span>
			</div>
		</div>
		<div>
			<textarea rows="13" required="required" placeholder="请输入你要申报的内容" name="repairtContent" id="value1"></textarea>

		</div>
		<div id="kbdiv"></div>
		<div style="padding-top: 10px;">
			<span style="padding-left: 15px;color: #6aafe6;">添加图片说明</span>
			<div id="tutu">
			<div id="clic" style="margin-left: 20px;position: relative;">
				<img src="img/1588131272(1).png" id="tjimg" style="max-width:374px;display: none;"/>

				<img src="img/tianjia.png" id="" style="max-width:374px;"/>
				<input type="file" name="repairImg" accept="img/jpeg,img/png,img/gif"
					class="uploadImg"   id="file" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;">
			</div>
			</div>
		</div>
		<div id="bottomdiv">
			<button style="border-radius:100px;outline:none;width: 150px;height: 40px;color: white;background-color: #5ebafd;">提交</button>
		</div>
	</form>
</div>

</body>
</html>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	/*$("#clic").change(function () {
		var input=$("#file");
		var flie=input[0].files[0];//获取input上传的文件
		if(!flie.name){
			alert("未选择图片");
		}else{
			//浏览器对文件上传路径进行安全处理，无法直接获取input的value进行访问，故转化为获取图片路径的url进行安全访问
			var url=window.URL.createObjectURL(flie);//将上传文件转化为url
			$("#tjimg").attr('src',url);//更新img的src属性
		}
	})*/
	$("#tutu").change(function () {
		var input=$("#file");
		var flie=input[0].files[0];//获取input上传的文件

		if(!flie.name){
			alert("未选择图片");
		}else{
			//浏览器对文件上传路径进行安全处理，无法直接获取input的value进行访问，故转化为获取图片路径的url进行安全访问
			var url=window.URL.createObjectURL(flie);//将上传文件转化为url
			if (url!=null||url!=""){
				$("#tjimg").show();
				$("#tjimg").attr('src',url);//更新img的src属性
			}
		}
	})
</script>